<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-01 14:10:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-01 15:00:38
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="qfedu">千锋教育大前端重磅发布web3.0</div>
    <script>
        // document.getElementById('qfedu') 通过选择器找到这个标签 
        // 获取标签中间的内容   innerHTML 
        // 标签中间可以有子标签 也可以有文本  标签和文本统称为innerHTML

        function test1() {
            var titles = document.getElementById('qfedu').innerHTML;
            var arr = titles.split(""); //拆成数组 
            var first = arr.shift(); //取出第一个 
            arr.push(first); //放到数组结尾
            titles = arr.join(""); // 把数组拼接成字符串 

            // console.log(titles);
           
            document.getElementById('qfedu').innerHTML = titles;
            // 给标签中间重新赋值 
        }
        // setInterval(test1,1000);
        // setInterval("test1()",1000);
        // setInterval(function(){test1()},1000);
        

        var i;
        //这个i 要注意作用域  防止停止的时候
        //没有权限拿到这个i 
        
    </script>
    
    <button onclick="test1();i = setInterval(function(){test1()},1000)">点击开始</button>
    <button onclick="clearInterval(i)">停止</button>
    <!-- 上面一点击 开始  需要让页面直到这是第几个定时器 -->

    <!-- setTimeout setInterval 两个方法都有一个返回值 
    返回值是一个数字   这个数字就代表第几个定时器  -->

    <!-- 停止的时候 我们通过这个数字来停止指定的定时器   -->
</body>

</html>